
<template>
  <div class="work">
    <div class="work_top">
      <div class="work_top_left">
        <div class="work_describe">
          <div class="work_describe_box">
            <Title :title="'工作描述'"></Title>
            <div class="p1">{{ workHistory.work_depict }}</div>
            <div class="describe_arr">
              <div
                  v-for="(item,i) in workHistory.technical"
                  :key="i"
                  class="describe_arr_item"
              >{{ item.name }}</div>
            </div>
            <span>入职时间：{{ workHistory.entry_time }} 至 {{ workHistory.quit_time }} </span>
          </div>
          </div>

        <div class="work_company">
          <div class="company_introduce">
            <div class="company_introduce_box">
              <img src="	http://login.114my.cn/memberpic/lixiaohua/uploadfile/image/20210724/20210724204554_703267415.png
" alt="">
              <p>公司介绍</p>
            </div>
            <div class="company_introduce_box_bg">
              <span>{{ workHistory.about_us }}</span>
            </div>
          </div>
          <div class="company_content">
            <div class="company_content_box">
              <img src="	http://login.114my.cn/memberpic/lixiaohua/uploadfile/image/20210724/20210724204554_703267415.png
" alt="">
              <p>工作内容</p>
            </div>
            <div class="company_content_box_bg">
              <span>{{ workHistory.work_cms }}</span>
            </div>
          </div>
        </div>
      </div>

      <div class="work_top_right">
        <img class="work_course" src="	http://login.114my.cn/memberpic/lixiaohua/uploadfile/image/20230129/20230129163514_1926318625.png" alt="">
        <div class="work_course_bottom">
          <p>Work Process</p>
          <span>Design + Front End</span>
        </div>
      </div>
    </div>

    <div class="work_bottom">
      <div class="work_bottom_left">
        <Title :title="'项目案例'"></Title>
        <div v-if="porjectData.length !== 0" class="work_project">
          <div
              class="work_project_item"
              v-for="(item,i) in porjectData"
              :key="i"
          >
            <span>{{item.substr(0, 1)}}</span>
            <p>{{item}}</p>
          </div>

        </div>
        <el-empty v-else description="暂无数据"></el-empty>
      </div>
      <div  v-if="workHistoryData.length !== 0" class="work_experience">
        <div class="experience_item"
             @click="workCut(i)"
             v-for="(item,i) in workHistoryData"
             :key="i">
          <div class="experience_item_left" >
            <img class="experience_item_img" src="http://login.114my.cn/memberpic/lixiaohua/uploadfile/image/20210724/20210724203838_1740562518.png" alt="">
            <div class="experience_item_center">
              <p>{{ item.about_us }}</p>
              <span>{{ item.company }}</span>
            </div>
          </div>
          <div class="experience_item_right">+ </div>
        </div>
      </div>

      <div v-else class="work_experience">
        <div class="experience_item">
          <div class="experience_item_left" >
            <img src="http://login.114my.cn/memberpic/lixiaohua/uploadfile/image/20210724/20210724203839_1214202078.png" alt="" class="experience_item_img">
            <div class="experience_item_center">
              <span>期待下一站</span>
            </div>
          </div>
          <div class="experience_item_right">+ </div>
        </div>

      </div>

    </div>
  </div>
</template>

<script>
import Title from "@/components/title.vue";
import moment from "moment/moment";

export default {
  components: {Title},
  data(){
    return{
      workHistory:[], // 只拿第一个公司的数据
      company:'',
      porjectData:[],
      workHistoryData:[], // 拿走所有的数据
    }
  },
  methods:{

    // 切换
    workCut(value){
      // console.log(value)
      this.getWorkHistory(value )
    },

    async getWorkHistory(value) {
      this.porjectData = []
      await this.$axios.getWorkHistory({take:9999}).then(res => {
        let num = value == undefined?0:value
        // console.log(num)
        this.workHistory = res.data[num]
        this.company = this.workHistory.company
        this.workHistory.entry_time =  moment(this.workHistory.entry_time).format('YYYY/MM/DD')
        this.workHistory.quit_time =  moment(this.workHistory.quit_time).format('YYYY/MM/DD')
        this.workHistoryData = res.data
        console.log()

        this.$axios.getCoreProject({take:9999}).then(res => {
          for(let k in res.data){
            if(res.data[k].workCourse.company == this.company){
              this.porjectData.push(res.data[k].name)
            }
          }
          this.$axios.getSiteProject({take:9999}).then(res => {
            for(let k in res.data){
              if(res.data[k].workCourse.company == this.company){
                this.porjectData.push(res.data[k].name)
              }
            }
          })
        })

      })
    },

  },
  mounted() {
    this.changeStyle(2)
    this.getWorkHistory()
  }
}

</script>

<style scoped lang="less">
.work{
  display: flex;
  justify-content: space-between;
  //height: 100%;
  height: calc( 100% - 3.4vw );
  //height:  100%;

  flex-direction: column;


  .work_top{
    /deep/ .title_value{
      color: #fff !important;
    }
    height: 49vh;
    display: flex;
    justify-content: space-between;

    .work_top_left{
      width: 66%;
      display: flex;
      justify-content: space-between;

      .work_describe{
        width: 50%;
        height: 100%;
        background: url(http://login.114my.cn/memberpic/lixiaohua/uploadfile/image/20210724/20210724192318_916531604.png) 50% no-repeat;
        background-size: cover;
        border-radius: 2.083vw;
        position: relative;
        overflow: hidden;
        color: #fff;

        .work_describe_box{
          width: 100%;
          position: absolute;
          top: 1.45vw;
          left: 2.292vw;
          z-index: 10;
        }

        .p1{
          width: 80%;
          font-size: .833vw;
          line-height: 2.4vw;
          margin-left: 0.2vw;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
        .describe_arr{
          idth: 60%;
          display: flex;
          flex-flow: wrap;

          .describe_arr_item{
            width: 4.167vw;
            line-height: 1.302vw;
            background: #d27700;
            border-radius: 0.625vw;
            text-align: center;
            font-size: .729vw;
            margin-right: 0.521vw;
            margin-bottom: 0.417vw;
          }
        }

        span{
          display: block;
          font-size: .729vw;
          margin-top: 0.1vw;
          margin-left: 0.2vw;
        }

      }

      .work_company{
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        width: 45.808%;
        height: 100%;
        border-radius: 2.083vw;

        .company_introduce{
          width: 100%;
          height: 18.5vh;
          background: #555;
          border-radius: 1.2vw;
          padding: 1.042vw;
          padding-top: 0.8vw;
          background: url(http://login.114my.cn/memberpic/lixiaohua/uploadfile/image/20210724/20210724192318_544411144.png) 0 0 no-repeat;
          background-size: 100%;
          display: flex;
          flex-direction: column;
          justify-content: space-between;

          .company_introduce_box{
            display: flex;
            align-items: center;
            color: #fff;

            img{
              width: 1.667vw;
              height: 1.667vw;
              margin-right: 0.625vw;
              display: block;
            }

            p{
              font-size: 1.042vw;
              font-weight: 700;
            }
          }

          .company_introduce_box_bg{
            width: 100%;
            font-size: .677vw;
            flex: 1;
            height: 0;
            background: rgba(0,0,0,.75);
            color: #fff;
            border-radius: 0.78125vw;
            margin: 0 auto;
            margin-top: 0.8vw;
            text-align: justify;
            padding: .8vw;
            box-sizing: border-box;

            span{
              height: 100%;
              line-height: 1.15vw;
              overflow: auto;
              padding-right: 3px;
            }
          }
        }

        .company_content{
          height: 18.5vh;
          background: #555;
          border-radius: 1.2vw;
          padding: 1.042vw;
          padding-top: 0.8vw;
          background: url(http://login.114my.cn/memberpic/lixiaohua/uploadfile/image/20210724/20210724192318_544411144.png) 0 0 no-repeat;
          background-size: 100%;
          display: flex;
          width: 100% ;
          flex-direction: column;
          justify-content: space-between;

          .company_content_box{
            display: flex;
            align-items: center;
            color: #fff;

            img{
              width: 1.667vw;
              height: 1.667vw;
              margin-right: 0.625vw;
              display: block;
            }

            p{
              font-size: 1.042vw;
              font-weight: 700;
            }
          }

          .company_content_box_bg{
            width: 100%;
            font-size: .677vw;
            flex: 1;
            height: 0;
            background: rgba(0,0,0,.75);
            color: #fff;
            border-radius: 0.78125vw;
            margin: 0 auto;
            margin-top: 0.8vw;
            text-align: justify;
            padding: .8vw;
            box-sizing: border-box;

            span{
              height: 100%;
              line-height: 1.15vw;
              overflow: auto;
              padding-right: 3px;
            }
          }
        }



      }

    }

    .work_top_right{
      width: 28%;
      height: 100%;
      border-radius: 2.083vw;
      color: #20b4a1;
      display: flex;
      flex-direction: column;
      justify-content: space-between;

      img{
        width: 100%;
      }

      .work_course_bottom{
        margin-left: 0.521vw;

        p{
          font-size: 1.25vw;
          font-weight: 700;
          line-height: 1.25vw;
        }

        span{
          font-size: .833vw;
          display: block;
          line-height: .833vw;
        }
      }
    }
  }
  
  .work_bottom{
    display: flex;
    justify-content: space-between;
    height: 29.4vh;

    /deep/ .el-empty{
      padding: 0;
    }

    .work_bottom_left{
      width: 62.3%;
      height: 100%;
      background: #fff;
      border-radius: 2.083vw;
      padding: 1.7vw 2.5vw 1.7vw 2.5vw;
      flex-direction: column;
      display: flex;
      justify-content: space-between;

      .work_project{
        display: flex;
        margin-top: 0.78125vw;
        overflow: auto;
        padding-bottom: 1vw;

        .work_project_item:last-child{
          margin-right: 0;
        }

        .work_project_item{
          margin-right: 6vw;

          span{
            display: block;
            width: 7.5vw;
            height: 7.5vw;
            line-height: 7.5vw;
            text-align: center;
            font-size: 2.5vw;
            font-weight: lighter;
            background: #1e9985;
            border-radius: 1vw;
            color: #fff;
          }

          p{
            font-size: .833vw;
            color: #333;
            line-height: 1.042vw;
            margin-top: 0.6vw;
            font-weight: 700;
            text-indent: 0.365vw;
            width: 7.5vw;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }
        }
      }

      .work_project::-webkit-scrollbar-thumb {
        background: #f5f5f5;
      }

      .work_project::-webkit-scrollbar{
        height:  0.2883vw;
        width: 0.2883vw !important;
      }
    }
    .work_experience::-webkit-scrollbar{
      width: 0px;
    }
    .work_experience{
      width: 28%;
      height: calc(100% + 3.4vw);
      display: flex;
      flex-direction: column;
      margin-top: -0.2vw;
      overflow: auto;

      .experience_item{
        background: #ebeff7;
        height: 9.8vh;
        min-height: 9.8vh;
        border-radius: 2.604vw;
        border: 0.0977vw solid #e3e6f1;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 1.2vw 0 2.083vw;
        cursor: pointer;
        margin-bottom: 1.22vw;

        .experience_item_left{
          display: flex;
          align-items: center;
          color: #1c2654;

          .experience_item_img{
            display: block;
            width: 2vw;
            margin-right: 1.04vw;
          }

          .experience_item_center{
            height: 100%;
            padding: 1vw 0 ;

            p{
              font-size: .9375vw;
              line-height: .9375vw;
              font-weight: 700;
              margin-bottom: 0.417vw;
            }

            span{
              display: block;
              font-size: .729vw;
            }
          }
        }

        .experience_item_right{
          width: 1.6vw;
          line-height: 1.6vw;
          text-align: center;
          font-size: 1vw;
          background: #fff;
          color: #1c2654;
          border-radius: 50%;
        }
      }

    }
  }
}
/deep/ .title_value{
  margin-top: 0vw !important;
  margin-left: 0vw !important;
  font-size: 1.146vw !important;
}


/deep/ .el-empty{
  .el-empty__image{
    width: 10vw;
  }
  .el-empty__description {
    margin-top: 1vw;
  }
  .el-empty__description p {
    margin: 0;
    font-size: 1.7333vw;
    color: #909399;
  }
}

</style>